<template>
  <div id="home">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple" id="main_data1">
          <h4>在线人数</h4>
          <p>即时在线人数: <span v-text="one.data[0].value"></span></p>
          <p>员工总数: <span v-text="one.data[1].value"></span></p>
          <div class="canvas-wrap">
            <my-echart id="one" width="100" height="100" v-if="reqCom" :data="one"></my-echart>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" id="main_data2">
          <h4>访客量</h4>
          <p>今日访客量: <span v-text="two.data[0].value"></span></p>
          <p>总访客量: <span v-text="two.data[1].value"></span></p>
          <div class="canvas-wrap">
            <my-echart id="two" width="100" height="100" v-if="reqCom" :data="two"></my-echart>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" id="main_data3">
          <h4>订单概览</h4>
          <p>未完成订单: <span v-text="three.data[0].value"></span></p>
          <p>总订单数: <span v-text="three.data[1].value"></span></p>
          <div class="canvas-wrap">
            <my-echart id="three" width="100" height="100" v-if="reqCom" :data="three"></my-echart>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" id="main_data4">
          <h4>销售额、利润</h4>
          <p>销售额: <span v-text="four.data[0].value"></span> </p>
          <p>利润: <span v-text="four.data[1].value"></span></p>
          <div class="canvas-wrap">
            <my-echart id="four" width="100" height="100" v-if="reqCom"  :data="four"></my-echart>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" style="height: 300px">
        <div class="canvas-wrap">
          <my-echart id="five" width="600" height="300" v-if="reqCom" :data="five"></my-echart>
        </div>
      </el-col>
      <el-col :span="8" style="height: 300px">
        <div class="canvas-wrap">
          <my-echart id="six" width="250" height="250" v-if="reqCom" :data="six"></my-echart>
        </div>
      </el-col>
    </el-row>
<!--    <my-echart></my-echart>-->
    <h3 style="color: black">最新订单展示</h3>
    <el-table
      :data="recentlyData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="orderId"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称">
      </el-table-column>
      <el-table-column
      prop="buyNum"
      label="购买数量">
      </el-table-column>
      <el-table-column
      prop="buyerName"
      label="购买者">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  // 在vue当中如何使用 Echarts
  // 1- 下载Echarts npm i echarts -S
  // 2- 引入 Echarts 在main.js当中

  import MyEchart from '../components/MyEchart'
  import * as url from '../api/cf_index_api'
  export default {
    name: "Home",
    computed: {
    },
    data (){
      return {
        reqCom:false,
        one: {
          name: '在线人数统计',
          type: 'pie',
          radius: ['60%', '80%'],
          labelLine: {
            show: true
          },
          data: [
            {value: 0,name: '即时在线人数'},
            {value: 0,name: '总的人数'}
          ]
        },
        two: {
          name: '访问',
          type: 'pie',
          radius: ['60%', '80%'],
          labelLine: {
            show: true
          },
          data: [
            {value: 0,name: '今日访客量'},
            {value: 0,name: '总访客量'}
          ]
        },
        three: {
          name: '订单概览',
          type: 'pie',
          radius: ['60%', '80%'],
          labelLine: {
            show: true
          },
          data: [
            {value: 0,name: '未完成订单'},
            {value: 0,name: '总订单'}
          ]
        },
        four: {
          name: '销售额,利润',
          type: 'pie',
          radius: ['60%', '80%'],
          labelLine: {
            show: true
          },
          data: [
            {value: 0,name: '销售额'},
            {value: 0,name: '利润'}
          ]
        },
        six: {
          name: '完成率',
          type: 'pie',
          radius: ['70%', '80%'],
          labelLine: {
            show: true
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20px',
              fontWeight: 'bold'
            }
          },
          data: [
            {value: 14693,name: '已完成目标'},
            {value: 12670,name: '未完成目标'}
          ]
        },
        five: {
          title: {
            text: '销售记录表格',
            subtext: '今年销售概况'
          },
          xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            data: [14, 34, 5, 44, 23, 44, 33,23,29,12,9,49]
          }]
        },
        // recentlyData: [
        //     {orderId: "1", goodsName: "BJORKSNAS 约纳斯", buyNum: 1, buyerName: "光头强", buyerTel: "19988886666"},
        //     {orderId: "2", goodsName: "LISABO 利萨伯", buyNum: 3, buyerName: "袁大头", buyerTel: "19988886666"},
        //     {orderId: "3", goodsName: "KORTGARDEN 库佳顿", buyNum: 2, buyerName: "光头强", buyerTel: "19988886666"}
        //   ],
        recentlyData: [],
      }
    },
    components: {
      'my-echart': MyEchart
    },
    created() {
      console.log('home 页面请求数据')
      // this.one.data[0].value = parseInt(Math.random()*20)
      // this.one.data[1].value = parseInt(Math.random()*100)
      // this.two.data[0].value = parseInt(Math.random()*20)
      // this.two.data[1].value = parseInt(Math.random()*100)
      // this.three.data[0].value = parseInt(Math.random()*20)
      // this.three.data[1].value = parseInt(Math.random()*100)
      // this.four.data[0].value = parseInt(Math.random()*20)
      // this.four.data[1].value = parseInt(Math.random()*100)
      // this.recentlyData = [...res.tabledata]
      // console.log(this.recentlyData)
      this.$axios({
        method: 'get',
        url: url.HOME
      }).then(res => {
        console.log('数据拿到了')
        console.log(res)
        if (res.data.code === 400) {
          this.$message.error('请求错误')
        } else if(res.data.code ===200) {
          //请求成功,修改数据
          return res.data
        }
      }).then(res => {
        this.reqCom = true
        this.one.data[0].value = res.summary.workers.online
        this.one.data[1].value = res.summary.workers.allworker
        this.two.data[0].value = res.summary.visitor.todayVisitor
        this.two.data[1].value = res.summary.visitor.totalvisitor
        this.three.data[0].value = res.summary.orderInfo.unfinished
        this.three.data[1].value = res.summary.orderInfo.totalorder
        this.four.data[0].value = res.summary.sales.xiaoshoue.toFixed(2)
        this.four.data[1].value = res.summary.sales.lirun.toFixed(2)
        this.recentlyData = [...res.tabledata]
        this.six.data[0].value = res.summary.workers.online
        this.six.data[1].value = res.summary.workers.allworker
        this.five.series[0].data = res.summary.monthdata.map(item => item.toFixed(2))
        console.log(this.recentlyData)
      }).catch(err =>{
        console.log(err)
      })
    },
  }
</script>

<style lang="less" scoped>
#home {
  el-row {
    margin-bottom: 40px;
  }
  .grid-content {
    /*background-color: red;*/
    position: relative;
    height: 100px;
    border-radius: 10px;
    color: white;
    line-height: 30px;
    padding-left: 10px;
    .canvas-wrap {
      position: absolute;
      top: 0;
      right: 0;
    }
    &#main_data1{
      background-color: #00E6D6;
    }
    &#main_data2{
      background-color: #F89CCB;
    }
    &#main_data3{
      background-color: #2BB0FB;
    }
    &#main_data4{
      background-color: #8D62F9;
    }
  }
}
</style>
